<template>
  <div class="customer">
    <el-button size="mini" class="btn" @click="addCustomer" type="primary">添加客户</el-button>
    <!-- 表格部分 -->
    <zj-table
      v-loading="loading"
      :columns="columns"
      :data="lists"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :total="total"
      :selectable="false"
      height="auto"
      :pagination="true"
    />
    <!-- 弹窗 -->
    <el-dialog
      v-el-drag-dialog
      title="添加客户"
      :visible.sync="dialogVisible"
      width="25%"
      center>
      <el-form ref="role" :model="form" :rules="accountRules" size="mini">
        <el-form-item label="客户名称: " label-width="80px" prop="name">
          <el-input v-model="form.name" placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="联系人: " label-width="80px" prop="contacts">
          <el-input v-model="form.contacts" placeholder="请输入联系人名称" />
        </el-form-item>
        <el-form-item label="联系电话: " label-width="80px" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入电话号码" />
        </el-form-item>
        <el-form-item label="添加时间: " label-width="80px" prop="addTime">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.addTime" style="width: 100%;"></el-date-picker>
        </el-form-item>
        <el-form-item label="备注: " label-width="80px" prop="note">
          <el-input v-model="form.note" type="textarea" placeholder="请添加备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data(){
    return {
      loading: false,
      dialogVisible: false,
      total: 1,
      currentPage: 1,
      pageSize: 10,
      form: {},
      lists: [
        {
          id: "1562252077955190786",
          addTime: '2023-01-03', //添加时间
          note: '',  //备注
          name: "吕恣瑞",  //客户
          contacts: '苏冉',  //联系人
          phone: "17503237677"  //联系电话
        }
      ],
      columns: Object.freeze([
        {
          label: '客户名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '联系人',
          prop: 'contacts',
          align: 'center'
        },
        {
          label: '联系人电话',
          prop: 'phone',
          align: 'center'
        },
        {
          label: '添加时间',
          prop: 'addTime',
          align: 'center'
        },
        {
          label: '备注',
          prop: 'note',
          align: 'center'
        },
        {
          width: 300,
          label: '操作',
          actions: [
            {
              id: 'follow',
              text: '编辑',
              type: 'primary',
              disabled: ({ roleKey }) => roleKey === 'admin',
              click: this.dialog
            },
            {
              id: 'delete',
              text: '删除',
              type: 'danger',
              disabled: ({ roleKey }) => roleKey === 'admin',
              click: this.delItem
            }
          ]
        }
      ])
    }
  },
  methods: {
    dialog(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    delItem(){
      this.$message({
        type: 'warning',
        message: '该功能尚未开发'
      })
    },
    addCustomer(){
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.customer {
  .btn {
    margin-bottom: 20px;
  }
}
</style>